import React from 'react';
import { SysStyle } from "./style"
import * as echarts from 'echarts';
import { useState, useEffect } from "react"
import { dealingtask, getScheduledata, getOrdercount, getOrderweek, getNotice, getHotricing } from "../../../model/loginModel"

const Index = () => {
    //待处理任务的state状态
    const [dealingTask, setDealingTask] = useState(
        {
            stockPending: "",
            outStockPending: "",
            approvalPendingSupplier: "",
            approvalPendingProcess: "",
            otherThings: ""
        })
    //日程管理部分的state状态
    const [scheduleData, setScheduleData] = useState("")
    //月、周订单的state状态
    const [orderCount, setOrdercount] = useState({})
    //一周的订单的state状态
    const [orderWeek, setOrderweek] = useState([])
    //公司通知的state
    const [notice, setNotice] = useState([])
    //热门增长
    const [hotlist, setHotlist] = useState([])
    const [hotchart, setHotchart] = useState([])
    //获取待处理任务数据的函数
    async function getDealingTask() {
        let data = await dealingtask()
        data = data.data.data
        setDealingTask(data)
    }
    //获取日程管理部分的数据
    async function getscheduleData() {
        let data = await getScheduledata()
        data = data.data.data.splice(1, 5)
        setScheduleData(data)
    }
    //获取月、周订单总量对比
    async function getorderData() {
        let data = await getOrdercount()
        data = data.data.data
        setOrdercount(data)
    }
    //获取单周的订单数量
    async function getorderWeek() {
        let data = await getOrderweek()
        data = data.data.data
        data = data.map(item => {
            return item.orderSum
        })
        setOrderweek(data)
    }
    //获取公司公告
    async function getnotice() {
        let data = await getNotice()
        data = data.data.data
        data = data.splice(0, 10)
        setNotice(data)
    }
    //获取热门增长数据
    async function gethotrising() {
        let data = await getHotricing()
        data = data.data.data
        setHotlist(data.map(item => item.name))
        setHotchart(data.map(item => item.totle))
    }
    //模拟componentDidMount()
    useEffect(() => {
        getDealingTask()
        getscheduleData()
        getorderData()
        getorderWeek()
        getnotice()
        gethotrising()
    }, []);
    //模拟componentDidUpdate()
    useEffect(() => {
        var Chart1 = echarts.init(document.getElementById('main'));
        Chart1.setOption({
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: orderWeek,
                type: 'line',
                areaStyle: {}
            }]
        })

        var Chart2 = echarts.init(document.getElementById('hotBar'));
        Chart2.setOption({
            xAxis: {
                type: 'category',
                data: hotlist
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: hotchart,
                type: 'bar'
            }]
        });

    });
    return (

        <SysStyle>
            <div className="left">
                <div className="leftTop">
                    <div className="waitingTask">
                        <div className="header">待处理任务</div>
                        <ul>
                            <li>待入库商品<span>(<i>{dealingTask.stockPending}</i>)</span></li>
                            <li>待出库商品<span>(<i>{dealingTask.outStockPending}</i>)</span></li>
                            <li>待审核供应商<span>(<i>{dealingTask.approvalPendingSupplier}</i>)</span></li>
                            <li>待审批流程<span>(<i>{dealingTask.approvalPendingProcess}</i>)</span></li>
                            <li>其他事项<span>(<i>{dealingTask.otherThings}</i>)</span></li>
                        </ul>
                    </div>
                    <div className="schedule">
                        <div className="header">日程管理</div>
                        <ul>
                            {
                                scheduleData.length > 0 ?
                                    scheduleData.map((item, index) => {
                                        return <li key={index}>
                                            <span className="meetingDate">{item.data}</span>
                                            <span>{item.type}</span>
                                        </li>

                                    }) :
                                    <>
                                        <li>
                                            <span className="meetingDate">2017.12.03</span>
                                            <span>需求会议</span>
                                        </li>
                                        <li>
                                            <span className="meetingDate">2017.12.04</span>
                                            <span>产品会议</span>
                                        </li>
                                        <li>
                                            <span className="meetingDate">2017.12.04</span>
                                            <span>产品会议</span>
                                        </li>
                                        <li>
                                            <span className="meetingDate">2017.12.04</span>
                                            <span>需求会议</span>
                                        </li>
                                        <li>
                                            <span className="meetingDate">2017.12.04</span>
                                            <span>需求会议</span>
                                        </li>
                                    </>
                            }
                        </ul>
                    </div>
                </div>
                <div className="leftBottom">
                    <div className="header">订单统计</div>
                    <div className="orderChange">
                        {
                            orderCount !== {} ?
                                <>
                                    <p>本月订单数为<span>{orderCount.thisMonth}</span>，相较于上月增长<span>{(orderCount.thisMonth - orderCount.lastMonth).toString()}</span></p>
                                    <p>本周订单数为<span>{orderCount.thisWeek}</span>，相较于上周增长<span>{(orderCount.thisWeek - orderCount.lastWeek).toString()}</span></p>
                                </> : <>
                                    <p>本月订单数为<span></span>，相较于上月增长<span></span></p>
                                    <p>本周订单数为<span></span>，相较于上周增长<span></span></p>
                                </>
                        }
                    </div>
                    <div className="orderChart">
                        <div id="main"></div>
                    </div>
                </div>
            </div>
            <div className="right">
                <div className="rightTop">
                    <div className="header">公司公告</div>
                    <ul>
                        {
                            notice.length > 0 ?
                                notice.map(item => {
                                    return <li key={item.id}>{item.notice}</li>

                                }) : <li>正在加载中</li>

                        }
                    </ul>
                </div>
                <div className="rightBottom">
                    <div className="header">热门增长</div>
                    <div className="sortHot">
                        热门分类为<span>
                            {
                                hotlist.length > 0 ? hotlist.map((item) => item + "、")
                                    : <>加载中</>
                            }
                        </span>
                    </div>
                    <div id="hotBar">

                    </div>
                </div>
            </div>
        </SysStyle>
    );
}

export default Index;
